
    /*通过fetch获取数据*/
    fetch("http://chst.vip:1234/api/getbrandtitle").then(function(res){
        return res.json()
    }).then(function(res){
        callback(res);
        var x;
        $("#group .group-li>").click(function(){
            // console.log($(this).index());
             if(x==$(this).index()){
                $(this).find(".group-box").slideUp()
                x=null;
            }else{
                $(this).find(".group-box").slideDown().end().siblings().find(".group-box").slideUp();
                x=$(this).index()
            }
        })
    })
    .catch(function(){
        console.log("请求失败了,请抓紧找到问题！！！")
    })
    // 通过自定义回调函数进行数据处理
    function callback(date){
        // console.log(date.result);
        var dateArr = date.result;
        let str="";
        dateArr.forEach(function(item,index){
            str=str+`
            <li titleid="${item.brandtitleid}"> 
                <h3>${item.brandTitle}</h3>
                <div class="sjx"></div>
                <div class="group-box"></div>
            </li>`;
        });
        $("#group>.group-li").html(`${str}`);
        //存放新添加的li标签里面.group-box
        dateArr=document.querySelectorAll(".group-box");
        //通过循环请求获取.group-box里面数据 并进行添加
        dateArr.forEach(function(item,index){
            fetch(`http://chst.vip:1234/api/getbrand?brandtitleid=${index}`).then(function(res){
                return res.json()
            }).then(function(res){
                //res 是返回的参数
                // item 是当前执行是group-box
                dataCb(res,index,item)
            })
            .catch(function(){
                console.log("请求失败了,请抓紧找到问题！！！")
            })
        })
    }  


    function dataCb(date,num,item){
        var str2="";
        date.result.forEach(function(it,index){
            if(index<3){
                str2=str2+`
                <li>
                    <a href="./brand.html?title=${it.brandName}&brandtitleid=${it.brandId}">
                        <span class="span${index}">${index}</span>
                        <span>${it.brandName}</span>
                        <p>
                            ${it.brandInfo}
                        </p>
                    </a>
                </li>`;
            }else{
                str2=str2+`
                <li>
                    <a href="./brand.html?title=${it.brandName}&brandtitleid=${it.brandId}">
                        <span class="span3">${index}</span>
                        <span>${it.brandName}</span>
                        <p>
                            ${it.brandInfo}
                        </p>
                    </a>
                </li>`;
            }
        })
        item.innerHTML=str2;
    }
    $("#group .group-li").find(".group-box").slideUp(1000,function(){
        $(this).css("display","block");
    });